<template>
  <div class="app-list">
    <table class="mt-10 table-bg table-border table-hover table table-bordered">
      <tr>
        <td class="bold text-r pd-rt-10">登录账号：</td>
        <td>8447466</td>
        <td class="bold text-r pd-rt-10">所属部门：</td>
        <td>生产部</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">手机号码：</td>
        <td>18888888888</td>
        <td class="bold text-r pd-rt-10">个性签名：</td>
        <td>做自己的事，让别人看笑话吧。</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">性别：</td>
        <td>男</td>
        <td class="bold text-r pd-rt-10">当前职务：</td>
        <td>软件开发工程师</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">生日：</td>
        <td>1984年6月22日</td>
        <td class="bold text-r pd-rt-10">邮箱地址：</td>
        <td>Hello@wetech.com</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">城市：</td>
        <td>广东省深圳市</td>
        <td class="bold text-r pd-rt-10">分机座机：</td>
        <td>0755-88888888</td>
      </tr>
    </table>

  </div>
</template>
<script>
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'}
  },
    {
      title: 'Cash Assets',
      className: 'column-money',
      dataIndex: 'money'
    },
    {
      title: 'Address',
      dataIndex: 'address',
    }];

  const data = [{
    key: '1',
    name: 'john Brown',
    money: '$100,000',
    address: 'New York No. 1 Lake Park'
  },
    {
      key: '2',
      name: 'kobe blaent',
      money: '$50,000',
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'maker jodean',
      money: '$32390000',
      address: 'New York No. 1 Lake Park'
    }];
  export default {
    data() {
      return {
        data,
        columns
      }
    }
  }
</script>
<style lang="scss" scoped>
  th.column-money,
  td.column-money {
    /*text-align: right !important;*/
  }
  .app-list{
    table{
      tr{
        td{
          padding:10px 28px 10px 78px;
          &.bold{
            font-weight: 500;
            color:#000000;
          }
        }
      }
    }
  }
</style>
<!--
<a-list
  :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
  :dataSource="dataSource">
  <a-list-item slot="renderItem" slot-scope="item, index">
    <a-card :hoverable="true">
      <a-card-meta>
        <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
        <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
        <div class="meta-cardInfo" slot="description">
          <div>
            <p>活跃用户</p>
            <p>
              <span>{{ item.activeUser }}<span>万</span></span>
            </p>
          </div>
          <div>
            <p>新增用户</p>
            <p>{{ item.newUser | NumberFormat }}</p>
          </div>
        </div>
      </a-card-meta>
    </a-card>
  </a-list-item>
  <a-list-item>
    <a-card>
    </a-card>
  </a-list-item>
</a-list>
-->


<!--
<script>
  import AListItem from "ant-design-vue/es/list/Item";

  const dataSource = []

  dataSource.push({
    title: 'hello',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
    activeUser: 17,
    newUser: 1700
  })

  export default {
    name: "Article",
    components: {AListItem},
    data() {
      return {
        dataSource,
      }
    }
  }
</script>

<style lang="scss" scoped>

  .app-list {

    .meta-cardInfo {
      zoom: 1;
      margin-top: 16px;

      > div {
        position: relative;
        text-align: left;
        float: left;
        width: 50%;

        p {
          line-height: 32px;
          font-size: 24px;
          margin: 0;

          &:first-child {
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 4px;
          }
        }

      }
    }
  }

</style>
-->